import React, { useEffect, useState } from 'react'
import { Form, Input, Button, DatePicker, Col, Row, Breadcrumb } from 'antd';
import { Table ,Select,Modal} from 'antd';
import axios from 'axios';
import { useForm } from 'antd/lib/form/Form';
export default function Table1() {
    const [dataBase, setDataBase] = useState([])
    const [total, setTotal] = useState("0")
    const [isModalVisible1, setIsModalVisible1] = useState(false);

    const paginationProps = {
        onChange: (page) => {
            getData(page)
        },
        pageSize: 10,
        total: total,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    //行内数据
    const columns = [
        {
            title: "姓名",
            dataIndex: "xingMing",
            key: "xingMing",
            align: 'center',
            
        },
        {
            title: "医疗卡号",
            dataIndex: "yiLiaoKaHao",
            key: "yiLiaoKaHao",
            align: 'center',
        },
        {
            title: "诊断医生",
            dataIndex: "yiShengMingCheng",
            key: "yiShengMingCheng",
            align: 'center',
        }, {
            title: "药品",
            dataIndex: "yaoPin",
            key: "yaoPin",
            align: 'center',
        },
        {
            title: "单位",
            dataIndex: "danWei",
            key: "danWei",
            align: 'center',
        },
        {
            title: "单价",
            dataIndex: "danJia",
            key: "danJia",
            align: 'center',
        },
        {
            title: "数量",
            dataIndex: "shuLiang",
            key: "shuLiang",
            align: 'center',
        },
        {
            title: "金额",
            dataIndex: "jinE",
            key: "jinE",
            align: 'center',
        },
        {
            title: "日期",
            dataIndex: "jiJiaRiQi",
            key: "jiJiaRiQi",
            align: 'center',
        },
        {
            title: "操作",
            dataIndex: 'operation',
            key: 'operation',
            ellipsis: true,
            align: 'center',
            width: "300px",
            render: (text, row) => {
                return (
                    <>

                        <Button onClick={() => { chaKan(row) }} style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>查看</Button>
                    </>
                )
            }
        }
    ]
    //查看按钮
    const [form]=useForm()
    const chaKan = (row) => {
        setIsModalVisible1(true);
        console.log(row);
        form.setFieldsValue(row)
    }
    //获取表格数据
    const getData = (page) => {
        axios("/chuFangRiJi/chaXunFenYe", {
            method: "get",
            headers: { "Content-Type": "application/json" },
            params: {page:parseInt(page)}
        })
            .then(res => {
                console.log(res);
                let tempArr=[]
                let data=res.data.data
                if(res.data.code===0){
                    for(let i=0;i<data.length;i++){
                        let temp={}
                        temp=data[i]
                        temp.yaoPin=data[i].yaoPinJiaGe.yaoPinMing
                        temp.key=data[i].id
                        temp.jiJiaRiQi=data[i].jiJiaRiQi.split(" ")[0]
                        tempArr.push(temp)
                    }
                    setTotal(res.data.count)
                    setDataBase(tempArr)
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    useEffect(() => {
        getData(1)
    }, [])
    const chaXun=(value)=>{
        let temp={}
        if(value.riQi===undefined){
             temp.jiJiaRiQi=undefined
        }else{
         temp.jiJiaRiQi=value.riQi.format('YYYY-MM-DD')
        }
         // temp.jiJiaRiQi=value.riQi.format('YYYY-MM-DD')
         temp.xingMing=value.xingMing
         temp.yaoPinDaiHao=value.yaoPinDaiHao
         temp.yiLiaoKaHao=value.yiLiaoKaHao
         temp.page=1
         axios("/chuFangRiJi/chaXunFenYe",{
             method:"get",
             headers:{ "Content-Type": "application/json" },
             params:temp
         })
         .then(res=>{
             console.log(res);
             if (res.data.code === 0) {
                 let data = res.data.data
                 console.log(data);
                 let tempArr = []
                 for (let i = 0; i < data.length; i++) {
                     let temp = {}
                     temp.xingMing = data[i].xingMing
                     temp.yiLiaoKaHao = data[i].yiLiaoKaHao
                     temp.yiShengMingCheng = data[i].yiShengMingCheng
                     temp.yaoPin = data[i].yaoPinJiaGe.yaoPinMing
                     temp.shuLiang = data[i].shuLiang
                     temp.danWei=data[i].yaoPinJiaGe.danWei
                        temp.danJia=data[i].yaoPinJiaGe.danJia
                        temp.jinE=data[i].jinE
                     temp.jiJiaRiQi = data[i].jiJiaRiQi.split(" ")[0]
                     temp.key = data[i].id
                     temp.zongYaoFei = data[i].jinE
                     tempArr.push(temp)
                 }
                 setDataBase(tempArr)
                 setTotal(res.data.count)
             }
         })
         .catch(err=>{
             console.log(err);
         })
    }
    const riQi=()=>{}
    const handleCancel = () => {
        setIsModalVisible1(false);
    };
    return (
        <div>
            {/* table表格 */}
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>计价收费</Breadcrumb.Item>
                <Breadcrumb.Item>用户计价统计表</Breadcrumb.Item>
            </Breadcrumb>
            <Col span={24} className="contentBody-col">
                <Form layout='inline' onFinish={chaXun}>
                    <Form.Item
                        label="姓名"
                        name="xingMing"
                    >
                        <Input placeholder="请输入姓名" />
                    </Form.Item >
                    <Form.Item label="医疗卡号" name="yiLiaoKaHao">
                        <Input placeholder="请输入医疗卡号" />
                    </Form.Item>
                    
                    <Form.Item label="日期" name="riQi">
                        <DatePicker onChange={riQi} placeholder="请选择日期" />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit"  style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>查询</Button>
                    </Form.Item>
                </Form>
            </Col>
            <Col span={24} className="contentBody-col">
                <Table pagination={paginationProps} collapsible="true" dataSource={dataBase} columns={columns} childrenColumnName></Table>
            </Col>
            <Modal okText  cancelText="关闭" title="计价收费修改"   visible={isModalVisible1} onCancel={handleCancel}  >
                <Form   layout="vertical" form={form}>
                    <Form.Item
                        label="姓名"
                        name="xingMing"
                    >
                        <Input readOnly placeholder="请输入姓名" />
                    </Form.Item >
                    <Form.Item label="医疗卡号" name="yiLiaoKaHao">
                        <Input readOnly placeholder="请输入医疗卡号" />
                    </Form.Item>
                    <Form.Item label="诊断医生" name="yiShengMingCheng">
                        <Input readOnly/>
                    </Form.Item>
                    <Form.Item label="药品" name="yaoPin">
                        <Input readOnly/>
                    </Form.Item>
                    <Form.Item label="数量" name="shuLiang">
                        <Input readOnly />
                    </Form.Item>
                    <Form.Item label="金额" name="jinE">
                        <Input readOnly/>
                    </Form.Item>
                    <Form.Item label="日期" name="jiJiaRiQi">
                        <Input readOnly/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
